<template>
  <div class="patent">
    <div class="banner">
      <img src="@/assets/images/banner_patent.jpg"/>
    </div>
    <div class="w1190">
      <div class="product product1">
        <div class="title">
          <h3>发明专利</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>发明专利</h4>
            <p>保护创新技术方案<br/>维护品牌权益</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in fm" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="product product2">
        <div class="title">
          <h3>实用新型专利</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>实用新型专利</h4>
            <p>保护结构形状创新<br/>提升企业竞争力的重要指标</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in syxx" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="product product3">
        <div class="title">
          <h3>外观设计专利</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>外观设计专利</h4>
            <p>保护独特外观、申请高新、<br/>享受资助的有利条件</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in wg" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <special-list></special-list>
      <div class="news">
        <div class="box">
          <div class="box_tit">
            <h4>外观专利</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news1.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">专利申请需要哪些材料?</a>
              <a @click="onSwt">外观专利申请有哪些需要注意的?</a>
              <a @click="onSwt">专利申请流程是什么？</a>
              <a @click="onSwt">31类商标包含哪些内容？</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>发明专利</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news2.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">专利申请需要注意的事项</a>
              <a @click="onSwt">企业专利申请流程是什么?有哪些好处?</a>
              <a @click="onSwt">专利申请需要了解哪些问题?</a>
              <a @click="onSwt">专利申请需要多少钱?</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>实用新型专利</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news3.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">专利申请需要注意哪些问题？</a>
              <a @click="onSwt">专利申请需要注意哪些问题？</a>
              <a @click="onSwt">专利申请流程有哪些呢</a>
              <a @click="onSwt">专利申请流程是什么?</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>国际专利</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news4.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">欧盟外观专利申请流程是怎样的？</a>
              <a @click="onSwt">英国专利的保护期限是多久？</a>
              <a @click="onSwt">越南发明专利申请要哪些材料？</a>
              <a @click="onSwt">欧洲专利申请授权的条件有哪些？</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SpecialList from './components/SpecialList'
  import { getProductByCategory } from '@/api/product'
  import apis from '@/api'

  export default {
    components: { SpecialList },
    name: 'Patent',
    data () {
      return {
        id: 0,
        fm: [],
        syxx: [],
        wg: []
      }
    },
    created () {
      this.id = 3
      this.getPt(this.id)
    },
    methods: {
      getPt (id) {
        getProductByCategory(id).then(res => {
          this.fm = res.result.data[0].data
          this.syxx = res.result.data[1].data
          this.wg = res.result.data[2].data
        })
      },
      onSwt () {
        window.open(apis.Swt)
      }
    }
  }
</script>

<style scoped>
h3, h4, h5, p, a, li, ul, div, span {margin: 0;padding: 0;font-weight: 500;}
@font-face {
  font-family: "icomoon";
  src: url("../../assets/fonts/icomoon.eot");
  src: url("../../assets/fonts/icomoon.eot") format("embedded-opentype"), url("../../assets/fonts/icomoon.woff") format("woff"), url("../../assets/fonts/icomoon.ttf") format("truetype"), url("../../assets/fonts/icomoon.svg") format("svg")
}
[class^="icon-"],[class*=" icon-"] {font-family: icomoon;font-size: 16px;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased}
[class^="icon-"]:before,[class*=" icon-"]:before {text-decoration: inherit;display: inline-block;speak: none}
.icon-right2:before {content: "\e641"}
.icon-round-right:before {content: "\e642"}
.w1190{width: 1190px;margin: 0 auto;}
.patent{margin-top: -20px;background-color: #ffffff;padding-bottom: 60px;}
.banner{font-size: 0;}
.banner img{width: 100%;}
.title{display: flex;align-items: center;justify-content: space-between;padding: 55px 0 20px 0;}
.title h3{font-weight: 700;font-size: 30px;color: #333333;}
.title a{display: flex;align-items: center;font-size: 14px;color: #333333;}
.title a:hover{color: #f52930;}
.title a i{margin-left: 5px;font-size: 17px;width: 17px;height: 17px;line-height: 17px;color: #e52e3a;}
.channel{display: flex;background-color: #f7f7f7;padding-right: 12px;}
.channel .list_head{width: 230px;height: 320px;padding: 45px 0 0 25px;margin-right: 18px;}
.product1 .channel .list_head{background: url("../../assets/images/bg_patent1.jpg")no-repeat center;}
.product2 .channel .list_head{background: url("../../assets/images/bg_patent2.jpg")no-repeat center;}
.product3 .channel .list_head{background: url("../../assets/images/bg_patent3.jpg")no-repeat center;}
.channel .list_head h4{font-size: 24px;color: #ffffff;font-weight: 700;position: relative;padding-bottom: 12px;}
.channel .list_head h4:before{position: absolute;content: '';left: 0;bottom: 0;width: 40px;height: 2px;background-color: #ffffff;}
.channel .list_head p{font-size: 14px;color: #ffffff;margin-top: 14px;line-height: 16px;}
.channel .list_box{display: flex;}
.channel .list_box .box{width: 225px;height: 300px;padding: 34px 0 0 24px;background-color: #ffffff;margin: 10px 10px 0 0;transition: all 0.2s ease-in;}
.channel .list_box .box:hover{transform: translateY(-4px);}
.channel .list_box .box h4{height: 48px;font-size: 22px;line-height: 24px;width: 180px;color: #333333;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.channel .list_box .box .line{width: 30px;margin-top: 8px;border-top: 1px dashed #e4e4e4;}
.channel .list_box .box p{margin: 10px 0;font-size: 14px;color: #999;padding-right: 28px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.channel .list_box .box .price{color: #ff2f32;font-size: 20px;font-weight: 700;line-height: 24px;}
.channel .list_box .box a{color: #ff2f32;font-size: 16px;display: flex;align-items: center;height: 24px;}
.channel .list-box .advisory .icon,.channel .list-box-long .advisory .icon,.channel .list-box-long-advisory .advisory .icon,.channel .list-box-advisory .advisory .icon {font-size: 18px;margin-left: 2px;color: inherit;vertical-align: text-bottom;}
.channel .list_box .box img{width: 90px;height: 90px;margin-top: 32px;margin-left: 86px;}
.team .list{display: flex;flex-flow: row wrap;}
.news{display: flex;flex-flow: row wrap;}
.news .box{width: 570px;margin-right: 40px;}
.news .box:nth-child(2n){margin-right: 0;}
.news .box .box_tit{display: flex;align-items: center;justify-content: space-between;padding: 55px 0 20px 0;}
.news .box .box_tit h4{font-size: 24px;color: #333;}
.news .box .box_tit a{display: flex;align-items: center;font-size: 14px;color: #333333;}
.news .box .box_tit a:hover{color: #f52930;}
.news .box .box_tit a i{margin-left: 5px;color: #f52930;}
.news .box .box_list{display: flex;}
.news .box .box_list .img{width: 230px;height: 160px;}
.news .box .box_list .img img{display: inline-block;width: 100%;height: 100%;}
.news .box .box_list .list{width: 340px;padding: 8px 0 0 20px;overflow: hidden;box-sizing: border-box;}
.news .box .box_list .list a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-left: 10px;position: relative;font-size: 14px;line-height: 36px;color: #333;display: block;}
.news .box .box_list .list a:before{position: absolute;content: '';left: 0;top: 16px;width: 3px;height: 3px;background-color: #cccccc;}
.news .box .box_list .list a:hover{color: #f52930;}
</style>
